<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<!--仅用于放片段-->

<!--
    th:fragment : thymeleaf 中的片段，定义后可以到处引用，里面的属性可以传参
-->
<!--头部-->
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <!--调整缩放，方便移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情</title>

    <!--semantic ui 的 css-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

    <!--自己定义的 css-->
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

    <!--typo.css 的 css-->
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">

    <!--animate.css 的 css-->
    <link rel="stylesheet" href="../static/css/animate.min.css" th:href="@{/css/animate.min.css}">

    <!--prism 的 css-->
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">

    <!--tocbot 的 css-->
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">

</head>

<!--导航栏-->
<nav th:fragment="menu(n)" class="ui inverted segment attached m-padded-tb-mini m-shadow-small">
    <!--放在 container 里可以让四周都留点空隙-->
    <div class="ui container">
        <!--
            secondary : 相当于一个背景色的样式
            stackable : 表示可堆叠的，在移动端时，里面的元素会有序堆在一起，一般与 menu ，grid 等连用
        -->
        <div class="ui inverted secondary stackable menu">
            <!--teal : 相当于一个字体颜色，绿色-->
            <h2 class="ui teal header item">StarryX's Blog</h2>
            <!--在 ws 中可以快速写标签，例如： i.home.icon + tab键 = <i class="home icon"></i>-->
            <!--
                item : 与上面的 menu 相对应
                m-mobile-hide : 自定义的 css ，在移动端时隐藏
                m-item : 没有任何样式作用，仅用于 js 作为选择器
                @{/types/-1} : id 默认值为 -1
            -->
            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="idea icon"></i>分类</a>
            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="clone icon"></i>归档</a>
            <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i>关于我</a>

            <!--
                right item : 表示靠右
            -->
            <div class="right m-item item m-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <!--
                        ui icon input : 表示一个带图标的输入框，可用于搜索框
                        transparent : 表示背景是透明的
                        inverted : 因为上面是黑色的，所以这里也要反转，要不然看不见
                    -->
                    <div class="ui icon inverted transparent input">
                        <input type="text" name="query" placeholder="搜索..." th:value="${query}">
                        <!--
                            link : 表示可以点击跳转
                            document.forms['search'] : 获取当前页面 name 值为 search 的表单
                        -->
                        <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <!--用于移动端折叠导航栏的按钮-->
    <!--
        m-right-top : 自定义的 css，将元素至于右上角
        m-mobile-show : 自定义的 css ，在移动端时显示，在通常情况下隐藏
        menu toggle : 没有任何样式作用，仅用于 js 作为选择器
    -->
    <a href="#" class="ui black menu toggle icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>

</nav>

<!--博客一项-->
<div th:fragment="blog_item" class="ui vertical segment m-padded-big m-padded-tb-large m-mobile-lr-clear">
    <!--
        mobile reversed : 表示在移动端 grid 中的列顺序会反过来
    -->
    <div class="ui middle aligned mobile reversed stackable grid" th:each="blog : ${page.list}">
        <div class="eleven wide column">
            <h3 class="ui header"><a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">标题标题标题</a></h3>
            <!--
                |{blog.description}...| : 用 | 包裹的表示将里面的变量和字符串直接拼接
            -->
            <p class="m-text" th:text="|${blog.description}...|">段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容段落内容</p>
            <div class="ui middle aligned stackable grid">
                <div class="row">
                    <div class="eleven wide column">
                        <!--
                            horizontal : 将列表（list）横置
                        -->
                        <div class="ui mini horizontal link list">
                            <div class="item">
                                <!--
                                    avatar : 头像图片样式
                                -->
                                <img src="https://picsum.photos/id/1/100/100" th:src="@{${blog.user.avatar}}" class="ui avatar image">
                                <!--
                                    content : 图片后面的文字内容
                                -->
                                <div class="content"><span class="header" th:text="${blog.user.nickname}">名字</span></div>
                            </div>
                            <div class="item">
                                <!--
                                    #dates.format(blog.updateTime, 'yyyy-MM-dd') ： thymeleaf 的内置函数，将日期时间格式化
                                -->
                                <i class="calendar icon"></i><span th:text="${#dates.format(blog.updateTime, 'yyyy-MM-dd')}">2017-10-01</span>
                            </div>
                            <div class="item">
                                <i class="eye icon"></i><span th:text="${blog.views}">2341</span>
                            </div>
                        </div>
                    </div>
                    <!--文章标签-->
                    <div class="right aligned five wide column">
                        <!--
                            label : 标签样式，像实心按钮一样
                        -->
                        <a href="#" th:href="@{/types/{id}(id=${blog.type.id})}" target="_blank" class="ui teal basic label m-padded-tiny m-text-thin" th:text="${blog.type.name}">认知升级</a>
                    </div>
                </div>
                <div class="row">
                    <div class="column">
                        <a href="#" th:href="@{/tags/{id}(id=${tag.id})}" target="_blank" class="ui basic left pointing label m-padded-mini m-text-thin" th:classappend="${tag.id == activeTagId} ? 'teal'" th:each="tag : ${blog.tags}" th:text="${tag.name}">方法论</a>
                    </div>
                </div>

            </div>
        </div>
        <!--放带有链接的图片-->
        <div class="five wide column">
            <!--
                target="_blank" : 表示新打开一个标签
            -->
            <a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                <!--
                    占位图片使用方法：
                    https://picsum.photos/id/[图片id]/[宽度]/[高度]
                -->
                <img src="https://picsum.photos/id/1/800/450" th:src="@{${blog.firstPicture}}" class="ui rounded image">
            </a>
        </div>
    </div>
</div>

<!--页脚-->
<footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb">
    <!--
        center aligned : 里面所有元素居中
    -->
    <div class="ui center aligned container">
<!--        &lt;!&ndash;-->
<!--            grid : 类似于 bootstrap 中的 row，bootstrap 中 把一行分成 12 列，这里分成 16 列-->
<!--            divided : 每列之间加上分割线-->
<!--            inverted : 因为背景是反转色，所以这里也反转-->
<!--        &ndash;&gt;-->
<!--        <div class="ui inverted divided stackable grid">-->
<!--            &lt;!&ndash;二维码图片&ndash;&gt;-->
<!--            &lt;!&ndash;-->
<!--                wide : 宽度填满-->
<!--            &ndash;&gt;-->
<!--            <div class="three wide column">-->
<!--                &lt;!&ndash;把图片放在 list 里，使图片能居中&ndash;&gt;-->
<!--                <div class="ui inverted link list">-->
<!--                    <div class="item">-->
<!--                        &lt;!&ndash;-->
<!--                            rounded : 圆角的-->
<!--                        &ndash;&gt;-->
<!--                        <img src="../static/images/QRcode.png" th:src="@{/images/QRcode.png}" class="ui rounded image" style="width: 110px">-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash;&ndash;&gt;-->
<!--            <div class="three wide column">-->
<!--                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>-->
<!--                &lt;!&ndash;-->
<!--                    list : 里面的元素呈列表样式-->
<!--                &ndash;&gt;-->
<!--                <div class="ui inverted link list">-->
<!--                    &lt;!&ndash;-->
<!--                        item : 与上面的 list 相对应-->
<!--                    &ndash;&gt;-->
<!--                    <a href="#" class="item">用户故事</a>-->
<!--                    <a href="#" class="item">用户故事</a>-->
<!--                    <a href="#" class="item">用户故事</a>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="three wide column">-->
<!--                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>-->
<!--                &lt;!&ndash;-->
<!--                    list : 里面的元素呈列表样式-->
<!--                &ndash;&gt;-->
<!--                <div class="ui inverted link list">-->
<!--                    &lt;!&ndash;-->
<!--                        item : 与上面的 list 相对应-->
<!--                    &ndash;&gt;-->
<!--                    <a href="#" class="item">Email: dfasdog@qq.com</a>-->
<!--                    <a href="#" class="item">QQ: 13355767653</a>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="seven wide column">-->
<!--                &lt;!&ndash;加上自定义样式&ndash;&gt;-->
<!--                <h4 class="ui inverted header m-text-thin m-text-spaced">Blog</h4>-->
<!--                &lt;!&ndash;加上自定义样式&ndash;&gt;-->
<!--                <p class="m-text-thin m-text-spaced m-opacity-mini">一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话一段话</p>-->
<!--            </div>-->
<!--        </div>-->
<!--        &lt;!&ndash;分割线&ndash;&gt;-->
<!--        &lt;!&ndash;-->
<!--            divider : 与上面的 divided 区别开-->
<!--        &ndash;&gt;-->
<!--        <div class="ui inverted section divider"></div>-->
        <!--加上自定义样式-->
        <p class="m-text-thin m-text-spaced m-opacity-tiny">© 2021 StarryX 版权所有</p>
    </div>
</footer>

<!--js 的引用-->
<th:block th:fragment="script">
    <!--jquery 的 js-->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>

    <!--semantic ui 的 js-->
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

    <!--jquery.scrollTo 的 js-->
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>

    <!--prism 的 js-->
    <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>

    <!--tocbot 的 js-->
    <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>

    <!--qrcode 的 js-->
    <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>

    <!--waypoint 的 js-->
    <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
</th:block>

<body>

</body>
</html>